<template>
  <div class="box">
        <input class="ipt" type="text" v-model="txt">      
        <button class="btn" @click="add">压入</button>  
        <ul class="list">
            <List 
                v-bind:dataTxt="itme.txt" 
                v-for="itme in list" :key="itme._id" 
            />
        </ul>
  </div>
</template>

<script>
import List from "./TodoList-List.vue";

export default {
    name: "TodoList",
    data() {
        return {
            txt: "",
            list: [],      
            index: 0,      
        }
    },
    methods: {        
        add() {
            let obj = { _id: this.index++, txt: this.txt };
            
            this.list.push(obj);
            this.txt = "";
        }
    },
    components: {
        List: List,
    }
}
</script>

<style scoped>
    .box {        
        padding: 50px 10px;
        margin: 20px;
        border: 1px solid #fff; 

        background-color: #fff;
        color: black;

        text-align: center;
    }
    .ipt {        
        width: 250px;
        height: 20px;
    }
    .btn {
        margin-left: 10px;
        font-weight: 700;
    }  
    .list {
        text-align: left;                
    }  
</style>